<template>
	<div>
		<el-container>
			<el-header class="header_style">
				<el-row>
					<el-col :span="6">
						<router-link to="/">
							<img style="margin-top: 15px" src="../assets/img/banner.png" width="30px" />
						</router-link>
					</el-col>
					<el-col :span="14">
						<h3 style="margin-left: 35%">{{ username }}的主页</h3>
					</el-col>
					<el-col :span="2" v-if="loginUser != null">
						<el-avatar style="margin-top: 10px; float: right; margin-right: 30px" :size="40"
							:src="loginUser.avatarUrl"></el-avatar>
					</el-col>
					<el-col :span="2" v-if="loginUser != null">
						<el-link href="/self" style="font-size: 20px; margin-top: 15px" :underline="false">我的</el-link>
						<el-link @click="logout()" style="font-size: 20px; margin-top: 15px; margin-left: 30px"
							:underline="false">退出</el-link>
					</el-col>

					<el-col :span="4" v-if="loginUser == null">
						<router-link to="/login">
							<el-button type="primary" plain style="float: right; margin-top: 10px; margin-right: 10px">
								登录</el-button>
						</router-link>
					</el-col>
				</el-row>
			</el-header>

			<el-main style="margin-top: 60px;">
				<el-row>
					<el-col :span="4">&nbsp;</el-col>
					<el-col :span="16">
						<el-image style="width: 100%; height: 300px"
							:src="require('../assets/img/user_page_background.png')"></el-image>

						<el-row>
							<el-col :span="4" style="margin-top: 20px">
								<div style="text-align: center">
									<el-avatar :size="100" :src="avatarUrl"></el-avatar>
									<h4 v-text="username"></h4>
									<span v-text="description"></span>
								</div>
							</el-col>
							<el-col :span="20">
								<el-empty style="margin-top: 50px" v-if="videos.length == 0" description="没有视频哦">
								</el-empty>
								<el-row :gutter="10" style="margin-top: 10px">
									<el-col :span="4" v-for="video in videos" :key="video.id" style="height: 130px">
										<video-list-item-small :videoId="video.id" :coverImageUrl="video.coverImageUrl"
											:duration="video.duration" :title="video.title"></video-list-item-small>
									</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="4">&nbsp;</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>
</template>

<script>
	import VideoListItemSmall from '../components/VideoListItemSmall.vue'
	export default {
		components: {
			VideoListItemSmall
		},
		name: "User",
		data() {
			return {
				loginUser: null,
				userId: 3,
				username: "ikun",
				description: "fucking go to die",
				avatarUrl: "http://10.24.23.44:9000/avatar/7504cbc0af4b40f2a8bdc33ce7b34f91header.jpg",
				videos: []
			}
		},
		methods: {
			logout() {
				this.$axios.post('/user/logout', {
					headers: {
						'bingo_cookie': this.loginUser.bingo_cookie
					}
				}).then((result) => {
					localStorage.removeItem('bingo_username')
					localStorage.removeItem('bingo_userId')
					localStorage.removeItem('bingo_avatarUrl')
					localStorage.removeItem('bingo_description')
					localStorage.removeItem('bingo_cookie')
					location.reload()
				}).catch((err) => {
					console.log(err)
				})
			},
		},
		mounted() {
			if (localStorage.getItem('bingo_cookie') != null) {
				this.loginUser = {
					id: localStorage.getItem('bingo_userId'),
					username: localStorage.getItem('bingo_username'),
					avatarUrl: localStorage.getItem('bingo_avatarUrl'),
					description: localStorage.getItem('bingo_description'),
					bingo_cookie: localStorage.getItem('bingo_cookie')
				}
			}
			this.userId = this.$route.params['userId']
			var self = this
			this.$axios.get('/user/info/' + this.userId).then((result) => {
				self.username = result.data.data.username
				self.description = result.data.data.description
				self.avatarUrl = result.data.data.avatarUrl
			}).catch((err) => {
				console.log(err)
			})

			this.$axios.get('/user/' + this.userId + "/videos").then((result) => {
				self.videos = result.data.data
			}).catch((err) => {
				console.log(err)
			})
		},
	}
</script>

<style scoped>
	.header_style {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		border-radius: 30px;
		width: 99%;
		position: fixed;
		background: rgba(255, 255, 255, .5);
		z-index: 10;
		margin-left: auto;
		margin-right: auto;
		backdrop-filter: blur(6px);
	}
</style>